<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta charset="UTF-8" />
		<title>操作 管理员</title>
		<link rel="stylesheet" th:href="@{/moon/css/bootstrap2.css}" />
		<link rel="stylesheet" th:href="@{/menu/metisMenu.css}" />
		
	</head> 

	<body class="bg-pm">
		
		<div class="container-fluid" style="overflow: hidden;" id="app">
		
			<!-- 数据显示 -->
			<div class="row">
				<div class="col">
				
				<center><h2 style="margin-top:10px" >管理员列表</h2></center>
				
				
				<!-- 条件搜索表单 -->
				<div class="form-inline float-right mb-2" >
					<input type="text" class="form-control form-control-sm"
						   placeholder="账户名" id="Name" style="margin:10px" />
					<input type="text" class="form-control form-control-sm ml-1"
						   placeholder="手机号" id="Phone" style="margin:10px" />
					<button class="btn btn-sm btn-info ml-1" @click="showdata(true);" >筛选</button>
				</div>
				<div class="clearfix"></div>  
				
				<!-- 数据显示区域 -->
				<div class="mt-2">
					
					<!-- 以列表形式显示管理员 -->
					<table class="table table-hover">
						<tr>  
							<th> AId </th>
							<th> 账户 </th>
							<th> 手机号 </th>
							<th> 操作 </th>
						</tr> 
						<tr v-for="(au,index) in admin">
							<td>{{index+1+(pageNum-1)*pageSize}}</td>
							<td>{{au.adminname}}</td>
							<td>{{au.adminphone}}</td>
							<td> 
								<button class="btn btn-sm btn-outline-info mr-1" @click="goUpdateAdmin(au.adminname);" >修改</button>
								
								<button class="btn btn-sm btn-outline-danger" @click="deleteAdmin(au.adminid);">删除 </button>
							
							</td>
						</tr>
					</table>
					
					<!-- 不要忘记清除浮动 -->
		 			<div class="clearfix"></div>
					
					<!-- 底部分页栏 -->
					<div class="mt-2">
						<div id="pager" class="pagination"></div>
					</div>
			
				</div>
			</div>
			
		<!-- JS -->
			<script th:src="@{/moon/js/jquery.js}"></script>
			<script th:src="@{/moon/js/vue.js}"></script>
			<script th:src="@{/layer/layer.js}"></script>
			<script th:src="@{/page/jqpaginator.js}"></script>
		<script th:inline="javascript">
			
			//新进入页面时，默认显示第一页
			var pageNum = 1;

			//app.studentdata是数组[]类型
			var app = new Vue({
				el : "#app",
				data : { 
					admin : [] ,
					pageNum : 1 ,
					pageSize : 4
				},
				methods : {
					showdata : function(f) {
						if(f){
							pageNum=1;
							$("#pager").jqPaginator(
								"option", 
								{ currentPage: 1 }
							);	
						}
						
						$.post("/auction/Admin/selectAdminByCond", {
							Name : $("#Name").val(),
							Phone : $("#Phone").val(),
							pageNum : pageNum,
							pageSize : 4
						}, function(data) {
							//alert(JSON.stringify(data.list));
							app.admin = data.list;
							app.pageNum = 1;
							//alert(JSON.stringify(app.admin));
							//修改totalPages
							$("#pager").jqPaginator(
								"option", 
								{ totalPages : data.pagecount }
							);
						});
					},
					deleteAdmin : function(aId){
						
						if(confirm("确认删除？")){
							$.post("/auction/Admin/deleteAdminById", 
									{ aId : aId }, 
									function(data) {
										if(data=="true"){
											alert("删除成功");
											location.href="/auction/Admin/adminiframe/selectAdminByCond";
										}else
											alert("删除失败");
									});					
						}
					},
					goUpdateAdmin : function(aName){
						location.href="/auction/Admin/goUpdateAdmin?aName="+aName;
					}
				
				} 
			});

			//初始化分页
			//实时setpager
			//程序由上至下执行，所以app.showdata();必须写在上面，否则拿不到数据
			$("#pager").jqPaginator({
				totalPages : 1,
				currentPage : 1,
				onPageChange : function(num, type) {
					app.pageNum = num;
					pageNum = num;
					app.showdata(false);
				}
			});
			
		</script>
		
		</div>
		
	</body>
</html>